<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .p1,.p4{
      color:red;
    }
    .p3:hover,.p6:hover{
      background-color:yellow;
    }
    p[class*="p2"]{
      background-color:red;
      font-size:20px;
    }
    .box1{
     /* color: #2b8afb;*/
      background-color: grey;
    }
    .box2{
      /*color: #b5f1b8;*/
      font-size:20px;
      background-color: grey;
    }
  </style>
</head>
<body>
<h1>高级CSS选择器应用</h1>
<div class="box1">
<h2>第一节:选择器组合</h2>
<p class="p1">这个段落会显示为红色(相邻兄弟选择器效果)</p>
<p class="p2">这个段落有特殊样式(属性选择器效果)</p>
<p class="p3">这个段落有背景色(伪类选择器效果)</p>
</div>
<div class="box2">
<h2>第二节:继承与层叠</h2>
<p class="p4">这个段落也会显示为红色</p>
<p class="p5">这个段落继承父级的字体大小</p>
<p class="p6">这个段落同样有背景色</p>
</div>
</body>
</html>